%script{ src: "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js" }

%div{ id: 'chart-container', style: "max-height: 256px" }
  %canvas{ id: "myChart", style: "height: 256px !important" }

:javascript
  parseDataForChart = (record) => {
   return {
    t: new Date(record["date"]),
    y: record["count"]
   }
  }

  const intervals = #{report.intervals.to_json.html_safe}
  const discussions_per_interval = #{report.discussions_per_interval.to_json.html_safe}
  const comments_per_interval = #{report.comments_per_interval.to_json.html_safe}
  const stances_per_interval = #{report.stances_per_interval.to_json.html_safe}
  const polls_per_interval = #{report.polls_per_interval.to_json.html_safe}
  const outcomes_per_interval = #{report.outcomes_per_interval.to_json.html_safe}
  const memberships_per_interval = #{report.memberships_per_interval.to_json.html_safe}
  ctx = document.getElementById("myChart").getContext('2d')
  myChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: intervals,
      datasets: [
        {
          label: 'members',
          backgroundColor: '#4C78A8',
          data: intervals.map(interval => (memberships_per_interval[interval] || 0) )
        },
        {
          label: 'threads',
          backgroundColor: '#F58518',
          data: intervals.map(interval => (discussions_per_interval[interval] || 0) )
        },
        {
          label: 'comments',
          backgroundColor: '#54A24B',
          data: intervals.map(interval => (comments_per_interval[interval] || 0) )
        },
        {
          label: 'polls',
          backgroundColor: '#E45756',
          data: intervals.map(interval => (polls_per_interval[interval] || 0) )
        },
        {
          label: 'votes',
          backgroundColor: '#B279A2',
          data: intervals.map(interval => (stances_per_interval[interval] || 0) )
        },
        {
          label: 'outcomes',
          backgroundColor: '#FF9DA7',
          data: intervals.map(interval => (outcomes_per_interval[interval] || 0) )
        }
     ],
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true
          }
        }]
      }
    }
   })
